<template>
  <el-drawer :title="title" :visible.sync="drawerVisible" direction="rtl" size="67%" :before-close="handleClose"
    custom-class="drawer-container">
    <div class="drawer-content">
      <div class="detail-header">
        <el-button type="primary" size="small" icon="el-icon-printer" @click="handlePrint">打印运单</el-button>
      </div>

      <el-tabs v-model="activeTab">
        <!-- 基本信息标签页 -->
        <el-tab-pane label="基本信息" name="basic">
          <div class="detail-section">
            <h3 class="section-title">运单信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">运单编号：</span>
                  <span class="detail-value">{{ shipmentInfo.billNo }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">运单状态：</span>
                  <span class="detail-value">
                    {{ shipmentInfo.billStatus }}
                  </span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">创建时间：</span>
                  <span class="detail-value">{{ parseTime(shipmentInfo.createTime) }}</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="detail-section">
            <h3 class="section-title">发货信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">发货方：</span>
                  <span class="detail-value">{{ shipmentInfo.senderName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">联系人：</span>
                  <span class="detail-value">{{ shipmentInfo.contactA }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">联系电话：</span>
                  <span class="detail-value">{{ shipmentInfo.phoneA }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">发货地址：</span>
                  <span class="detail-value">{{ shipmentInfo.addressA }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">发货城市：</span>
                  <span class="detail-value">{{ shipmentInfo.senderCity }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">坐标：</span>
                  <span class="detail-value" v-if="shipmentInfo.coordinatesA">
                    {{ shipmentInfo.coordinatesA }}
                  </span>
                  <span class="detail-value" v-else>-</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="detail-section">
            <h3 class="section-title">收货信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">收货方：</span>
                  <span class="detail-value">{{ shipmentInfo.receiverName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">联系人：</span>
                  <span class="detail-value">{{ shipmentInfo.contactB }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">联系电话：</span>
                  <span class="detail-value">{{ shipmentInfo.phoneB }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">收货地址：</span>
                  <span class="detail-value">{{ shipmentInfo.addressB }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">收货城市：</span>
                  <span class="detail-value">{{ shipmentInfo.receiverCity }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">坐标：</span>
                  <span class="detail-value" v-if="shipmentInfo.coordinatesB">
                    {{ shipmentInfo.coordinatesB }}
                  </span>
                  <span class="detail-value" v-else>-</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="detail-section">
            <h3 class="section-title">货物信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">货物名称：</span>
                  <span class="detail-value">{{ shipmentInfo.goodsName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">货物类型：</span>
                  <span class="detail-value">{{ shipmentInfo.goodsType }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">货物重量：</span>
                  <span class="detail-value">{{ shipmentInfo.goodsWeight }} {{ shipmentInfo.weightUnit || 'kg' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">货物体积：</span>
                  <span class="detail-value">{{ shipmentInfo.volume }} m³</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">运输方式：</span>
                  <span class="detail-value">{{ shipmentInfo.transportType }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">运费：</span>
                  <span class="detail-value">{{ shipmentInfo.carriage }} 元</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">预计发货时间：</span>
                  <span class="detail-value">{{ parseTime(shipmentInfo.sendTime, '{y}-{m}-{d}') }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">预计到达时间：</span>
                  <span class="detail-value">{{ parseTime(shipmentInfo.arriveTime, '{y}-{m}-{d}') }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <span class="detail-label">支付方式：</span>
                  <span class="detail-value">{{ shipmentInfo.payType }}</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="detail-section">
            <h3 class="section-title">可追溯信息</h3>
          </div>

          <div class="detail-section">
            <h3 class="section-title">备注</h3>
            <div class="remark-content">
              {{ shipmentInfo.remark || '无' }}
            </div>
          </div>

          <!-- 运输计划列表 -->
          <div class="detail-section">
            <h3 class="section-title">运输计划</h3>
            <div v-if="transportPlans.length === 0 && !planLoading">
              <el-empty description="暂无运输计划" :image-size="60"></el-empty>
            </div>
            <el-table v-else :data="transportPlans" style="width: 100%" max-height="300" v-loading="planLoading"
              size="small">
              <el-table-column type="index" width="50" align="center" label="序号" />
              <el-table-column prop="nodeType" label="节点类型" width="80" align="center">
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.nodeType === '起点' ? 'success' : scope.row.nodeType === '终点' ? 'danger' : 'info'"
                    size="mini">
                    {{ scope.row.nodeType }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="city" label="城市" width="200" />


              <el-table-column prop="estimatedDuration" label="累计耗时(小时)" width="120" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.estimatedDuration">{{ scope.row.estimatedDuration.toFixed(1) }}</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column prop="arrivalTime" label="到达时间" width="120" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.arrivalTime">{{ parseTime(scope.row.arrivalTime, '{m}-{d} {h}:{i}') }}</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="120" align="center">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime, '{m}-{d} {h}:{i}') }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>


      </el-tabs>
    </div>
  </el-drawer>
</template>

<script>
import { parseTime } from '@/utils/ruoyi'
import { listPlan } from '@/api/system/plan'

export default {
  name: 'ShipmentDetailDrawer',
  dicts: ['bill_status', 'transport_type'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '运单详情'
    },
    shipmentInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      drawerVisible: false,
      activeTab: 'basic',
      // 运输计划相关
      transportPlans: [],
      planLoading: false
    }
  },
  watch: {
    visible (val) {
      this.drawerVisible = val
      if (val) {
        this.activeTab = 'basic'
        // 加载运输计划
        this.loadTransportPlan()
      }
    },
    drawerVisible (val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    parseTime,
    /** 获取运单状态类型 */
    getStatusType (status) {
      const statusMap = {
        '1': 'warning',  // 待发货
        '2': 'primary',  // 运输中
        '3': 'success',  // 已签收
        '4': 'info'      // 已取消
      }
      return statusMap[status] || ''
    },
    /** 获取运单状态文本 */
    getStatusText (status) {
      const statusMap = {
        '1': '待发货',
        '2': '运输中',
        '3': '已签收',
        '4': '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    /** 获取货物类型文本 */
    getGoodsTypeText (type) {
      const typeMap = {
        '1': '普通货物',
        '2': '易碎品',
        '3': '液体',
        '4': '危险品',
        '5': '贵重物品'
      }
      return typeMap[type] || '未知类型'
    },
    /** 获取运输方式文本 */
    getTransportModeText (mode) {
      const modeMap = {
        '1': '公路运输',
        '2': '铁路运输',
        '3': '水路运输',
        '4': '航空运输'
      }
      return modeMap[mode] || '未知方式'
    },
    /** 获取支付方式文本 */
    getPaymentMethodText (method) {
      const methodMap = {
        '1': '寄付',
        '2': '到付',
        '3': '月结',
        '4': '第三方付'
      }
      return methodMap[method] || '未知方式'
    },

    /** 打印运单 */
    handlePrint () {
      this.$message.success('打印功能模拟：正在打印运单')
      // 实际打印功能实现
    },
    /** 关闭抽屉 */
    handleClose () {
      this.drawerVisible = false
    },

    /** 加载运输计划 */
    async loadTransportPlan () {
      console.log('开始加载运输计划，运单信息:', this.shipmentInfo)

      if (!this.shipmentInfo.billNo) {
        console.log('运单编号为空，无法查询运输计划')
        return
      }

      this.planLoading = true
      try {
        console.log('查询运输计划，运单编号:', this.shipmentInfo.billNo)

        const response = await listPlan({
          billNo: this.shipmentInfo.billNo
        })

        console.log('运输计划查询响应:', response)

        if (response.code === 200) {
          this.transportPlans = response.rows || []
          console.log('运输计划查询成功，数量:', this.transportPlans.length)
        } else {
          console.error('查询运输计划失败:', response.msg)
        }
      } catch (error) {
        console.error('查询运输计划异常:', error)
      } finally {
        this.planLoading = false
      }
    }
  }
}
</script>

<style scoped>
.drawer-content {
  padding: 20px;
}

.detail-header {
  margin-bottom: 20px;
  text-align: right;
}

.detail-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.detail-item {
  margin-bottom: 15px;
}

.detail-label {
  color: #606266;
  font-weight: bold;
}

.detail-value {
  color: #303133;
}

.remark-content {
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
  min-height: 60px;
}

.timeline-operator {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>
